<template>
  <div id="echarts3"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Echarts3",
  props:{
    date:{
      require:true,
    }
  },
  data() {
    return {
      echarts: ''
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts3')
      this.echarts = echarts.init(chartDom)

    },

    setEChartsOptions(data) {
      // data.map((item)=>({
      //   value:item.count,
      //   name:item.status
      // }))
      const option = {
        title: {
          text: `${this.date}年项目每月完成项目、未完成项目统计:`
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: data.map(item=>item.title)
        },
        tooltip: {
          trigger: 'item',
          // formatter: function(params){
          //   console.log(params)
          // }
        },
        series: [
          {
            name: '未完成项目',
            type: 'bar',
            stack: 'total',
            barWidth:'55%',
            label: {
              show: false
            },
            data:data.map(item=>item.un_complete_count)
          },
          {
            name: '已完成项目',
            type: 'bar',
            stack: 'total',
            barWidth:'55%',
            label: {
              show: false
            },
            data: data.map(item=>item.complete_count)
          }
        ]
      };
      this.echarts && this.echarts.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
#echarts3 {
  width: 100%;
  height: 100%;
}
</style>
